<template>
  <div id="baiduMap"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";

let map = null;
// 初始化地图
const initMap = () => {
  // 地图实例存在，则销毁地图
  if (map) {
    map = null;
  }
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  map = new BMapGL.Map("baiduMap"); // 创建Map实例
  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  console.log('map :>> ', map);
};
const mapResize = () => {
  // 地图实例存在，则重新调整地图大小
  map && map.resize();
};
onMounted(() => {
  initMap();
});
defineExpose({
  mapResize,
});
</script>

<style lang="scss" scoped>
#baiduMap {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
